<!-- 留言回复 -->

<template>
    <div class="content blog" id="message">
        <ModuleHeader :title="message.header.title" :sub-title="message.header.subtitle"/>
        <a-textarea placeholder="可以在这里留言哟，我都能看到的" v-model="content" :rows="4" :maxLength="255"/>

        <a-button type="dashed" @click="send">
            提交
        </a-button>

        <a-button type="dashed" @click="showModal">
            历史
        </a-button>

        <a-modal v-model="visible" title="最近的留言" @ok="handleOk">
            <a-list
                    class="comment-list"
                    :header="`${data.length} replies`"
                    item-layout="horizontal"
                    :data-source="data">
                <a-list-item slot="renderItem" slot-scope="item, index">
                    <a-comment :author="item.author" :avatar="item.avatar">
                        <template slot="actions">
                            <span v-for="action in item.actions">{{ action }}</span>
                        </template>
                        <p slot="content">
                            {{ item.content }}
                        </p>
                        <a-tooltip slot="datetime" :title="item.datetime">
                            <span>{{ item.datetime.fromNow() }}</span>
                        </a-tooltip>
                    </a-comment>
                </a-list-item>
            </a-list>
        </a-modal>

        <a-empty v-if="!loading && ((rss || {}).items || []).length < 1"/>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import ModuleHeader from '@/components/module/ModuleHeader.vue';
    import ModuleSkeleton from '@/components/module/ModuleSkeleton.vue';

    import api from '@/api';
    import {Rss} from '@/api/rss_interface';
    import {Module} from '@/api/user_interface';
    import axios from 'axios';
    import moment from '_moment@2.29.1@moment';

    @Component({
        components: {
            ModuleHeader,
            ModuleSkeleton,
        },
        computed: {
            message(): Module {
                return this.$store.getters.getModule('message');
            },
        },
        created() {
            (this as any).initBlog(this.$store.getters.getModule('message').rss);
        },
        filters: {
            decode(content: string) {
                const el = document.createElement(`el-${new Date().getTime()}`);
                el.innerHTML = content;
                return el.innerText;
            },
            sub(content: string) {
                return content.substr(0, 120);
            },
        },
    })

    export default class Message extends Vue {
        private loading = true;
        private rss: Rss = {};
        private content = '';
        private visible = false;


        private data = [
            {
                actions: ['Reply to'],
                author: '匿名1',
                avatar: 'http://123.xianglong.vip/img/avatar.de8614b5.jpg',
                content:
                    'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
                datetime: moment('2021-12-1 15:19:22'),
            },
            {
                actions: ['Reply to'],
                author: '匿名2',
                avatar: 'http://123.xianglong.vip/img/avatar.de8614b5.jpg',
                content:
                    'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
                datetime: moment('2021-12-1 15:19:22'),
            }, {
                actions: ['Reply to'],
                author: '匿名3',
                avatar: 'http://123.xianglong.vip/img/avatar.de8614b5.jpg',
                content:
                    'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
                datetime: moment('2021-12-1 15:19:22'),
            }, {
                actions: ['Reply to'],
                author: '匿名4',
                avatar: 'http://123.xianglong.vip/img/avatar.de8614b5.jpg',
                content:
                    'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
                datetime: moment('2018-05-11 15:19:22'),
            }, {
                actions: ['Reply to'],
                author: '匿名5',
                avatar: 'http://123.xianglong.vip/img/avatar.de8614b5.jpg',
                content:
                    'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
                datetime: moment('2021-12-1 15:19:22'),
            }, {
                actions: ['Reply to'],
                author: '匿名6',
                avatar: 'http://123.xianglong.vip/img/avatar.de8614b5.jpg',
                content:
                    'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
                datetime: moment('2021-12-1 15:19:22'),
            },
        ];

        private showModal() {
            console.log(moment('2018-05-11 15:19:22'));
            console.log(moment().subtract(2, 'days'));
            console.log(moment().subtract);
            this.visible = true;
        }

        private handleOk() {
            this.visible = false;
        }

        private send() {
            if (this.content === undefined || this.content === '') {
                this.$message.warning('【人工智能】检测到您输入数据可能不符合我的预期，请重新输入！');
                return;
            }

            axios({
                url: '/send',
                method: 'post',
                data: {message: this.content},
                headers: {
                    'Content-Type': 'application/json',
                },
            })
                .then((response) => {
                    this.$message.success('写的很好，下次不准再写了~^.^~');
                    console.log(response);
                    this.content = '';
                })
                .catch((error) => {
                    console.log(error);
                });

            // console.log(this.content);
        }

        private initBlog(rss?: string) {
            if (!rss) {
                return;
            }

            this.loading = true;

            api.rss(
                rss,
                (r) => {
                    this.rss = r;
                },
                () => {
                    this.loading = false;
                },
                (e) => {
                    this.loading = false;
                });
        }
    }
</script>

<style scoped lang="scss">
    @import '../styles/variable';

    .blog {
        .description {
            * {
                margin-right: 4px;
            }

            .title {
                color: $--selection-color
            }

            .pub-date {
                color: $--color-gray;
            }
        }

        .desc {
            color: $--color-gray;
            padding-left: 0em;
            display: inline-block;
        }

        @media screen and (max-width: $--screen-sm-min) {
            .description {
                .tag {
                    display: block;
                }
            }

            .desc {
                display: none;
            }
        }
    }
</style>
